<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<title>Dynatree - Example</title>

	<script src="../jquery/jquery.js" type="text/javascript"></script>
	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
	<!--
	jQuery.Preload Plugin by Ariel Flesler
	http://flesler.blogspot.com/2008/01/jquerypreload.html
	 -->
	<script src="../jquery/jquery.preload-min.js" type="text/javascript"></script>

	<link href="../src/skin-vista/ui.dynatree.css" rel="stylesheet" type="text/css">
	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>

	<!-- Start_Exclude: This block is not part of the sample code -->
	<link href="prettify.css" rel="stylesheet">
	<script src="prettify.js" type="text/javascript"></script>
	<link href="sample.css" rel="stylesheet" type="text/css">
	<script src="sample.js" type="text/javascript"></script>
	<!-- End_Exclude -->

<script type="text/javascript">
	$(function(){
		// Preload images (roughly sorted by importance)
		// Uses jQuery.Preload Plugin by Ariel Flesler (http://flesler.blogspot.com/2008/01/jquerypreload.html)
		$.preload([
			"ltWait",
			"vline",
			"ltFld", "ltFld_o",
			"ltL_", "ltL_ne", "ltL_nes", "ltL_ns", "ltM_ne", "ltM_nes", "ltP_ne", "ltP_nes",
			"ltD_ne", "ltD_nes", "ltDoc",
			"ltError",
			"cbUnchecked", "cbUnchecked_hover",
			"cbChecked", "cbChecked_hover",
			"cbIntermediate", "cbIntermediate_hover",
			"rbUnchecked", "rbUnchecked_hover",
			"rbChecked", "rbChecked_hover",
			"rbIntermediate", "rbIntermediate_hover",
			"move_here", "copy_here",
			"drop_accept", "drop_here", "drop_reject", "drop_sibling_here"
			], {
			base: "skin/",
			ext: ".jpg",
			onComplete: function(data){
				// Loaded one image
				logMsg("Loaded " + data.image);
			},
			onFinish: function(data){
				// All images loaded:
				logMsg("Loaded " + data.loaded + ", failed: " + data.failed);
			}
		});
		$("#tree").dynatree({
			// In real life we would call a URL on the server like this:
//          initAjax: {
//              url: "/getTopLevelNodesAsJson",
//              data: { mode: "funnyMode" }
//              },
			// .. but here we use a local file instead:
			initAjax: {
				url: "sample-data3.json",
				cache: true,
				dataType: "json",
				type: "GET",
				timeout: 5000,
				async: false
				},
			onLazyRead: function(node){
				node.appendAjax({
					url: "sample-data3.json",
					cache: true,
					dataType: "json",
					type: "GET",
					timeout: 5000,
					async: false
				});
			},
			onActivate: function(node) {
				$("#echoActive").text(node.data.title);
			},
			onDeactivate: function(node) {
				$("#echoActive").text("-");
			}
		});
	});
</script>
</head>

<body class="example">
	<h1>Example: Init from Ajax request</h1>
	<p class="description">
		This sample initializes the tree from a JSON request.
	</p>

	<!-- Add a <div> element where the tree should appear: -->
	<div id="tree">	</div>

	<div>Active node: <span id="echoActive">-</span></div>

	<!-- Start_Exclude: This block is not part of the sample code -->
	<hr>
	<p class="sample-links  no_code">
		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
		<a class="hideOutsideFS" href="#">Link to this page</a>
		<a class="hideInsideFS" href="samples.html">Example Browser</a>
		<a href="#" id="codeExample">View source code</a>
	</p>
	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
	<!-- End_Exclude -->
</body>
</html>
